<script setup>
import { getDisposeOrderFilterOrg } from '@/apis/order.js'
import NoData from '@/components/NoData.vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  office: {
    type: Array,
    default: () => []
  },
  directUnit: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits([
  'update:office',
  'update:direct-unit',
  'update:show',
  'search'
])
const showPopup = computed({
  get() {
    return props.show
  },
  set(val) {
    emits('update:show', val)
  }
})

const selectedList1 = computed({
  get() {
    return props.office
  },
  set(val) {
    emits('update:office', val)
  }
})
const selectedList2 = computed({
  get() {
    return props.directUnit
  },
  set(val) {
    emits('update:direct-unit', val)
  }
})

const list = ref([
  {
    name: '按所属处室',
    id: 'OFFICE',
    disabled: false,
    children: []
  },
  {
    name: '按直属单位',
    id: 'DIRECT_UNIT',
    disabled: false,
    children: []
  }
])
// handleActive
const activeIndex = ref(0)

function handleActive(index, disabled) {
  if (disabled) return
  activeIndex.value = index
}

const toggleState = (item) => {
  if (activeIndex.value === 0) {
    const index = selectedList1.value.findIndex(
      (selectedItem) => selectedItem.id === item.id
    )
    if (index !== -1) {
      selectedList1.value.splice(index, 1)
    } else {
      // 如果未选中，则添加到已选列表
      selectedList1.value.push(item)
    }
  } else {
    const index = selectedList2.value.findIndex(
      (selectedItem) => selectedItem.id === item.id
    )
    if (index !== -1) {
      selectedList2.value.splice(index, 1)
    } else {
      // 如果未选中，则添加到已选列表
      selectedList2.value.push(item)
    }
  }
}
const isActive = (item) => {
  if (activeIndex.value === 0) {
    return (
      selectedList1.value.findIndex(
        (selectedItem) => selectedItem.id === item.id
      ) > -1
    )
  } else {
    return (
      selectedList2.value.findIndex(
        (selectedItem) => selectedItem.id === item.id
      ) > -1
    )
  }
}

const clearSelectedList = () => {
  selectedList1.value = []
  selectedList2.value = []
  showPopup.value = false
  emits('search')
}

const handleConfirm = () => {
  showPopup.value = false
  emits('search')
}

async function getOptions(type) {
  try {
    const res = await getDisposeOrderFilterOrg({
      type
    })
    if (res.ret === 0) {
      if (type === 'OFFICE') {
        list.value[0].children = res.data
      }
      if (type === 'DIRECT_UNIT') {
        list.value[1].children = res.data
      }
    }
  } catch (error) {
    /* empty */
  }
}
onMounted(async () => {
  await getOptions('OFFICE')
  await getOptions('DIRECT_UNIT')
})
</script>

<template>
  <van-popup
    v-model="showPopup"
    :style="{ height: '60%' }"
    close-icon="arrow-down"
    closeable
    custom-style="border-top-left-radius: 3px;height:'30%', border-top-right-radius: 3px;"
    position="bottom"
    round
  >
    <div class="h-full box-border overflow-hidden pb-65px flex flex-col">
      <div
        class="px-12px flex items-center border-b-1px h-50px border-b-solid border-b-[#F2F5FA]"
      >
        <span class="text-16px font-600 leading-16px text-#171A1D">
          处理单位
        </span>
      </div>
      <div
        class="w-full box-border flex-1 flex overflow-x-hidden overflow-y-auto"
      >
        <ul
          class="w-110px box-border h-full overflow-x-hidden overflow-y-auto pl-12px pb-12px border-r-1px border-r-solid border-r-[#F2F5FA]"
        >
          <li
            v-for="(item, index) in list"
            :key="item.id"
            :class="{
              active: activeIndex === index,
              disabled: item.disabled
            }"
            class="py-9px text-14px font-400 leading-20px"
            @click="handleActive(index, item.disabled)"
          >
            {{ item.name }}
          </li>
        </ul>
        <ul
          class="box-border flex-1 h-full pl-24px pr-12px pb-12px overflow-x-hidden overflow-y-auto"
        >
          <li
            v-for="it in list[activeIndex]?.children"
            :key="it.name"
            :class="isActive(it) ? 'active' : ''"
            class="item h-24px relative py-5px text-14px font-400 leading-24px flex justify-between"
            @click="toggleState(it)"
          >
            <span class="flex-1 flex h-full overflow-x-auto whitespace-nowrap">
              {{ it.name }}
            </span>
            <div class="w-20px h-full flex justify-end items-center">
              <img
                v-if="isActive(it)"
                alt=""
                class="w-16px h-16px"
                src="@/assets/img/icon_chooseOne.png"
              />
            </div>
          </li>
          <template v-if="list[activeIndex]?.children.length === 0">
            <li class="w-full h-full overflow-hidden">
              <NoData :white="false" />
            </li>
          </template>
        </ul>
      </div>
    </div>
    <div
      class="absolute bottom-0 h-65px pb-15px pt-10px px-12px w-full box-border shadow-[0_-10px_16px_0_#0000000d] bg-#FFFFFF"
    >
      <div class="flex justify-between w-full gap-10px box-border">
        <van-button
          class="w-96px h-40px"
          plain
          type="primary"
          @click="clearSelectedList"
        >
          重置
        </van-button>
        <van-button
          class="w-240px h-40px"
          type="primary"
          @click="handleConfirm"
        >
          确定
        </van-button>
      </div>
    </div>
  </van-popup>
</template>
<style lang="less" scoped>
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}

.van-button--plain.van-button--primary {
  color: #07c160;
}

.van-button--plain {
  background-color: #fff;
}

li.active {
  color: #36b374;
}

li.disabled {
  color: #999999;
}
</style>
